<template>
	<view class="date_content">
		<view class="date_list" v-for="(item,index) in yearlist" :key="index" @click="handleChooseyear(item,index)">
			<view class="data_top" :class="y_Active === item.id ? 'y_active_text' : '' ">{{ item.title }}</view>
			<view class="data_img">
				<image src="../../../static/image/sanjiao.png" class="down_img" v-show="y_Active === item.id"></image>
			</view>
		</view>
		<view class="date_down" @click="handleShowyearData()">
			<image :src="showYear ? '../../static/image/down.png' : '../../static/image/up.png'"   class="down_j"></image>
			<view class="year_list" v-show="showYear">
				<view class="list_item" v-for="item in yearnum">{{ item }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				showYear:false,
				y_Active:0,
				yearnum:[ '2020年' , '2019年' , '2018年' ],
				yearlist:[
					{
						id:0,
						title:'当年'
					},
					{
						id:1,
						title:'去年'
					},
					{
						id:2,
						title:'2022年'
					},
					{
						id:3,
						title:'2021年'
					},
					{
						id:4,
						title:'2020年'
					}
				],
			}
		},
		methods:{
			handleChooseyear(item,index){
				this.y_Active = item.id
			},
			handleShowyearData(){
				this.showYear =! this.showYear
			}
		}
	}
</script>

<style lang="scss">
	.date_content{
		width: 340px;
		height: 40px;
		position: absolute;
		left: calc(50% - 170px);
		display: flex;
		.date_list{
			width: 55px;
			height: 40px;
			margin-left: 2px;
			.data_top{
				width: 100%;
				height: 22px;
				font-size: $font-size-14;
				text-align: center;
				line-height: 22px;
			}
			.y_active_text{
				color: $primary_color;
			}
			.data_img{
				width: 100%;
				height: 18px;
				@include centerAline();
				.down_img{
					width: 14px;
					height: 14px;
				}
			}
		}
		.date_down{
			width: 55px;
			height: 40px;
			display: flex;
			justify-content: center;
			margin-left: 2px;
			position: relative;
			.down_j{
				width: 16px;
				height: 16px;
				margin-top: 2px;
			}
			.year_list{
				width: 98px;
				position: absolute;
				background-color: $white_color;
				right: 5px;
				top: 25px;
				box-shadow: 3px 3px 3px #d9d9d9,
					-2px -2px 10px #ffffff;
				border-radius: $radius_eight;
				.list_item{
					width: 100%;
					height: 20px;
					line-height: 20px;
					font-size: $font-size-14;
					text-align: center;
				}
			}
		}
	}
</style>